<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组件基础</title>
    <script src="../public/vue_3.2.36.js"></script>
    <script src="../public/axios.js"></script>
  </head>
  <body>
    <template id="kk">
      <div>这里是一个模板，给子组件用的{{msg}}</div>
      <p>书的标题：{{title}}</p>
    </template>

    <div id="app">
      <h1>根组件</h1>
      <child :title="name"></child>
      <hr />
      <button @click="send">后端数据请求，看看后端解决的跨域问题</button>
      <hr />
      <p>
        在单文件组件中，推荐为子组件使用 PascalCase 的标签名，以此来和原生的
        HTML 元素作区分。虽然原生 HTML 标签名是不区分大小写的，但 Vue
        单文件组件是可以在编译中区分大小写的。我们也可以使用 /> 来关闭一个标签。&lt;MyComponent /&gt;
      </p>
      <p>
        如果你是直接在 DOM 中书写模板 (例如原生 &lt;template&gt;
        元素的内容)，模板的编译需要遵从浏览器中 HTML
        的解析行为。在这种情况下，你应该需要使用 kebab-case
        形式并显式地关闭这些组件的标签。
        如：&lt;my-component&gt;&lt;/my-component&gt;
      </p>
    </div>

    <script>
      const { createApp, ref } = Vue;
      const child = {
        // template: `<h2>子组件{{msg}}</h2>`,
        template: "#kk", //可以使用 ID 选择器来指向一个元素 (通常是原生的 <template> 元素)，Vue 将会使用其内容作为模板来源。
        props: ["title"],
        setup(props) {
          const msg = ref("xiaoyugege");
          return { msg };
        },
      };

      const app = createApp({
        components: {
          child,
        },
        setup() {
          const name = ref("luoyu");
          const send = () => {
            axios.get("http://localhost:8080/getpersonlist").then((val) => {
              console.log(val);
              /* 后端在控制层加上个这个东西，一下子就能解决跨域问题
       @Controller
      @CrossOrigin //后端放宽请求权限，解决跨域问题。
      public class PersonController {}
                          */
            });
          };
          return {
            send,
            name,
          };
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>
